<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
    
</head>
<body>
    <button>按键1</button>
    <button>按键2</button>
    <button>按键3</button>
</body>
</html>
<script type="text/javascript">
    /**
     * 
     * 实现需求：点击按钮，输出当前按钮的顺序
     */
    var buttons = document.getElementsByTagName('button')
    
    // 高效遍历伪数组，防止*.length每次都去计算
    // 此时此刻 i是一个全局变量，因为其并没有声明在函数中
    
    /*
    传统实现方式
    for (var i=0, len=buttons.length; i<len; i++) {
        // 循环完成，函数才执行
        buttons[i].index = i
        buttons[i].onclick = function () {
            alert(this.index + 1)
        }
    }*/

    /**
     * 闭包实现
     */
    for (var i=0, len=buttons.length; i<len; i++) {
        (function (x) {
            buttons[i].onclick = function () {
                alert(x + 1)
            }
        })(i)
    }

    /**
     * 闭包的产生：嵌套的内部函数，内部函数引用了外部函数的变量，后执行外部函数
     */
    function fn1 () {
        var a = 2 // 存在于闭包
        var b = 100 // 不存在于闭包
        function fn2 () {
            console.log(a)
        }
        fn2()
    }
    console.log(fn1)
    fn1()
    
    
    
    
</script>


